import * as React from "react";
import * as ReactDOM from "react-dom";

import "./ShipmentsLogs.less";
import NavBar from "../Components/NavBar/NavBar";


export interface ShipmentsLogsProps {

}

export interface State {
    currentWindow: string | number
}

export default class ShipmentsLogs extends React.Component<ShipmentsLogsProps, State> {
    //默认属性
    static readonly defaultProps: ShipmentsLogsProps = {};

    constructor(props: ShipmentsLogsProps) {
        super(props);
        //默认状态
        this.state = {
            currentWindow: 1
        };
    }

    //组件挂载后回调
    componentDidMount() {
        document.title = "查询发货单号";
    }

    render() {
        return <div className="ShipmentsLogs">
            <NavBar title={'查询发货单号'} searchClick={() => {
                console.log('搜索')
            }}/>
            <div className="tabs">
                <div className={`tab-item ${this.state.currentWindow === 1 ? 'current' : ''}`}
                     onClick={() => {
                         this.setState({currentWindow: 1})
                     }}>
                    扫给我的出货单
                </div>
                <div className={`tab-item ${this.state.currentWindow === 2 ? 'current' : ''}`}
                     onClick={() => {
                         this.setState({currentWindow: 2})
                     }}>
                    我扫描的发货单
                </div>
            </div>
            <div className="log-list">

                <div className="log-item">
                    <div className="log-item-top">
                        <div className="userinfo">
                            <img
                                src="http://thirdwx.qlogo.cn/mmopen/icoOywuc11kKTYfxSoscCYopy1RXp1Mz6Kk72J4lnYbiagzAZAe7L7QeSshtz7Aah49C8sJicC4gHEv6mkQvf5iaSRdHNCic3HkWJ/132"
                                alt="" className="headimg"/>
                            <p className="username">陈晨</p>
                        </div>
                        <div className="orderinfo">
                            <p className="order-number">
                                <i className={`iconfont ${this.state.currentWindow === 1 ? 'icon-zuo1' : 'icon-you'}`}/>
                                D1545487
                            </p>
                            <p className="order-time">
                                <i className="iconfont icon-shijian"/>
                                2018-11-06
                            </p>
                        </div>
                        <div className="order-from">
                            <img
                                src="http://thirdwx.qlogo.cn/mmopen/icoOywuc11kKTYfxSoscCYopy1RXp1Mz6Kk72J4lnYbiagzAZAe7L7QeSshtz7Aah49C8sJicC4gHEv6mkQvf5iaSRdHNCic3HkWJ/132"
                                alt="" className="shopimg"/>
                            <p>总部</p>
                        </div>
                    </div>
                    <div className="log-item-bottom">
                        <div className="order-product">
                            <p className="">发货数量 总:60 大:2 小:0</p>
                            <p>产品名称:维一植物精油(1)</p>
                        </div>
                        <div className="more">
                            <i className="iconfont icon-jiantou"/>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    }
}
